<template>
  <div class="mapview-main">
    <div
      ref="mapview"
      id="mapview"
    ></div>
  </div>
</template>

<style lang="scss" >
.mapview-main {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  // background: url("../assets/bg.png") repeat;
  .mapview-main-border {
    position: relative;
    top: 0;
    background: url("../assets/bgBorder.png") no-repeat;
    background-size: 100%;
    width: 100%;
    height: 100%;
    display: flex;
  }
}
#mapview {
  height: 100%;
}
</style>
<script>
import nantong from "@/geo/nantong";
import * as echarts from "echarts";
import "vue-bmap-gl/dist/style.css";
import {
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  VisualMapComponent,
  GeoComponent
} from "echarts/components";
import { MapChart } from "echarts/charts";
import { CanvasRenderer } from "echarts/renderers";
// eslint-disable-next-line no-unused-vars
import myHttp from "../router/httpStone";
echarts.use([
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  VisualMapComponent,
  GeoComponent,
  MapChart,
  CanvasRenderer
]);
import Recorder from "recorder-core";
import "recorder-core/src/engine/wav";
import "recorder-core/src/engine/mp3-engine";
//由于大部分情况下ios-weixin的支持需要用到amr解码器，应当把amr引擎也加载进来
import "recorder-core/src/engine/beta-amr";
import "recorder-core/src/engine/beta-amr-engine";
// eslint-disable-next-line no-irregular-whitespace
import { useStore } from "vuex";
export default {
  name: "Home",
  data() {
    return {
      store: useStore(), //此处初始化store对象
      rec: Recorder({
        type: "wav",
        sampleRate: 16000,
        bitRate: 16,
        onProcess: function() {}
      }),
      tegData: {},
      serverIP: "http://localhost:3000/",
      tags: ["金融", "政府", "公共卫生", "教育", "通信", "工业"],
      selectedTags: "all",
      zcTotle: "9876",
      dwTotle: [],
      mychart: null,
      allData: []
    };
  },
  computed: {
    changeMapCompanysData() {
      console.log(
        "this.store.getters.getCompanys:",
        this.$store.getters.getCompanys
      );
      return this.$store.getters.getCompanys;
    }
  },
  render: {
    watch: {
      changeMapCompanysData: {
        deep: true,
        handler(val) {
          // 由于是异步载入，所以只能在状态值的变化时执行渲染操作
          // 绝不可在mounted中执行render方法
          // this.render(val);
          console.log("val:", val);
        }
      }
    }
  },
  mounted() {
    // eslint-disable-next-line no-unused-vars
    const unsubscribe = this.store.subscribe((mutation, state) => {
      console.log(mutation.type);
      console.log(mutation.payload);
    });
    this.store.getters.getCompanys;
    this.allData = this.store.getters.getCompanys;
    echarts.registerMap("world", nantong);
    this.initChart();
  },
  methods: {
    onChange(data) {
      // var arr = this.getData(v);
      // this.dwTotle = "";
      // this.zcTotle = "";
      // setTimeout(() => {
      //   this.dwTotle = arr.length.toString();
      //   v == 2 ? (this.zcTotle = "679") : (this.zcTotle = "9876");
      // }, 300);
      // eslint-disable-next-line no-unused-vars
      const arrData = data;
      // eslint-disable-line no-unused-vars
      // const option = {
      //   series: [
      //     {
      //       data: arr
      //     },
      //     {
      //       data: [
      //         {
      //           name: "南通经济技术开发区",
      //           address: "江苏省南通市崇川区",
      //           value: [120.959224, 31.93862]
      //         }
      //       ]
      //     }
      //   ]
      // };
      // this.mychart.setOption(option);
    },
    initChart() {
      const dom = this.$refs.mapview;

      var COLOR_ALL = [
        "#99c6edb5",
        "#55b07194",
        "#ff5722b8",
        "#ffeb3b91",
        "#69d9e5b0",
        "#e13dbdb0"
      ];

      for (var i = 0; i < this.allData.length; i++) {
        this.allData[i].value = this.allData[i].value.split(",");
        switch (this.allData[i].type) {
          case "教育":
            this.allData[i].itemStyle = {
              color: COLOR_ALL[0]
            };
            break;
          case "工业":
            this.allData[i].itemStyle = {
              color: COLOR_ALL[1]
            };
            break;
          case "政府":
            this.allData[i].itemStyle = {
              color: COLOR_ALL[2]
            };
            break;
          case "金融":
            this.allData[i].itemStyle = {
              color: COLOR_ALL[3]
            };
            break;
          case "公共卫生":
            this.allData[i].itemStyle = {
              color: COLOR_ALL[4]
            };
            break;
          case "通信":
            this.allData[i].itemStyle = {
              color: COLOR_ALL[5]
            };
            break;

          default:
            break;
        }
      }

      const option = {
        title: {
          textStyle: {
            fontSize: 24,
            color: "#42A9E3"
          },
          text: "",
          subtext: "",
          top: 20,
          left: "center"
        },
        tooltip: {
          trigger: "item"
        },
        geo: {
          map: "world",
          roam: true,
          top: 11,
          zoom: 1,
          aspectScale: 0.8, //地图宽高比例
          label: {
            show: true,
            color: "#fff"
          },
          itemStyle: {
            normal: {
              areaColor: "#0e2f50",
              borderColor: "#1996b8",
              borderWidth: 2,
              shadowBlur: 2,
              shadowColor: "#0e2f50",
              shadowOffsetX: 5,
              shadowOffsetY: 10
            },
            borderWidth: 3
          },
          emphasis: {
            label: {
              show: true,
              color: "#fff"
            },
            itemStyle: {
              areaColor: "#042436",
              borderColor: "#42A6E2",
              borderWidth: 3
            }
          }
        },
        series: [
          {
            name: "资源",
            type: "scatter",
            coordinateSystem: "geo",
            data: this.allData,
            symbolSize: 9,
            label: {
              show: false
            },
            emphasis: {
              focus: "adjacency",
              label: {
                show: false
              }
            },
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetY: 5
            },
            tooltip: {
              backgroundColor: "#122734",
              borderWidth: 0,
              textStyle: {
                color: "#fff"
              },
              formatter: function(params) {
                return (
                  '<p style="text-align:left;">' +
                  params.name +
                  "<br>" +
                  "地址：" +
                  params.data.address +
                  "<br> IP:" +
                  params.data.ip +
                  "</p>"
                );
              }
            }
          },
          {
            name: "南通经济技术开发区",
            type: "effectScatter",
            coordinateSystem: "geo",
            symbolSize: 20,
            itemStyle: {
              shadowBlur: 10,
              shadowColor: "rgba(120, 36, 50)",
              shadowOffsetY: 5,
              color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
                {
                  offset: 0,
                  color: "rgb(251, 118, 123,.5)"
                },
                {
                  offset: 1,
                  color: "rgb(204, 46, 72,.5)"
                }
              ])
            },
            data: [
              {
                name: "南通经济技术开发区",
                address: "江苏省南通市崇川区",
                value: [120.959224, 31.93862]
              }
            ],
            label: {
              show: false
            },
            tooltip: {
              formatter: function(params) {
                return (
                  '<p style="text-align:left;">' +
                  params.name +
                  "<br>" +
                  params.data.address +
                  "</p>"
                );
              }
            },
            emphasis: {
              label: {
                show: false
              }
            }
          }
        ]
      };

      this.mychart = echarts.init(dom);
      this.mychart.setOption(option);
    },
    handleChange(tag) {
      var selQS = this.$refs.radio1;
      selQS.checked = true;
      const nextSelectedTags = this.selectedTags != tag ? tag : "all";
      this.selectedTags = nextSelectedTags;
      var arr = this.getDataForType(this.selectedTags); // eslint-disable-line no-unused-vars
      this.setDatas(arr);
    },
    setDatas(forData) {
      this.dwTotle = "";
      this.zcTotle = "";
      var num = Math.ceil(Math.random() * (9876 - 10) + 10);
      setTimeout(() => {
        this.dwTotle = forData.length.toString();
        this.zcTotle = num.toString();
      }, 300);
      const dom = this.$refs.mapview;
      const option = {
        series: [
          {
            data: forData
          }
        ]
      };
      this.mychart = echarts.init(dom);
      this.mychart.setOption(option);
    },
    // 返回重点单位
    getData(v) {
      var arr = [];
      if (v == 2) {
        for (var i = 0; i < this.allData.length; i++) {
          if (this.allData[i].isKey > 0) {
            arr.push(this.allData[i]);
          }
        }
      } else {
        arr = this.allData;
      }
      return arr;
    },
    // 返回重点单位
    getDataForType(v) {
      var arr = []; // eslint-disable-line no-unused-vars
      if (v != "all") {
        for (var i = 0; i < this.allData.length; i++) {
          if (this.allData[i].type == v) {
            arr.push(this.allData[i]);
          }
        }
      } else {
        arr = this.allData;
      }
      return arr;
    },
    // 整体数据过滤
    getTypes(data) {
      var typeNameArr = {
        b1Data: [
          {
            value: 0,
            name: "教育"
          },
          {
            value: 0,
            name: "工业"
          },
          {
            value: 0,
            name: "政府"
          },
          {
            value: 0,
            name: "金融"
          },
          {
            value: 0,
            name: "公共卫生"
          },
          {
            value: 0,
            name: "通信"
          }
        ],
        b2Data: {
          keys: ["windows", "centOs", "ubuntu"],
          datas: [0, 0, 0]
        },
        b3Data: {
          keys: ["http", "https", "pop3"],
          datas: [0, 0, 0]
        },
        b6Data: {
          keys: [
            "安全产品",
            "物联网设备",
            "企业应用",
            "网络产品",
            "支撑系统",
            "系统软件",
            "办公外设"
          ],
          datas: [0, 0, 0, 0, 0, 0, 0]
        }
      };
      for (let i = 0; i < data.length; i++) {
        const teg = data[i];
        for (let j = 0; j < typeNameArr.b1Data.length; j++) {
          if (teg.type == typeNameArr.b1Data[j].name) {
            typeNameArr.b1Data[j].value += 1;
          }
        }
        for (let k = 0; k < typeNameArr.b2Data.keys.length; k++) {
          const key = typeNameArr.b2Data.keys[k];
          const key3 = typeNameArr.b3Data.keys[k];
          if (teg.system == key) {
            typeNameArr.b2Data.datas[k] += 1;
          }
          if (teg.protocols == key3) {
            typeNameArr.b3Data.datas[k] += 1;
          }
        }
        for (let z = 0; z < typeNameArr.b6Data.keys.length; z++) {
          const key6 = typeNameArr.b6Data.keys[z];
          if (teg.addressType == key6) {
            typeNameArr.b6Data.datas[z] += 1;
          }
        }
      }
      return typeNameArr;
    },
    // 通过行业数据过滤
    getTypesForType(data, type) {
      var typeNameArr = {
        b1Data: [
          {
            value: 0,
            name: type
          }
        ],
        b2Data: {
          keys: ["windows", "centOs", "ubuntu"],
          datas: [0, 0, 0]
        },
        b3Data: {
          keys: ["http", "https", "pop3"],
          datas: [0, 0, 0]
        },
        b6Data: {
          keys: [
            "安全产品",
            "物联网设备",
            "企业应用",
            "网络产品",
            "支撑系统",
            "系统软件",
            "办公外设"
          ],
          datas: [0, 0, 0, 0, 0, 0, 0]
        }
      };
      for (let i = 0; i < data.length; i++) {
        const teg = data[i];
        for (let j = 0; j < typeNameArr.b1Data.length; j++) {
          if (teg.type == typeNameArr.b1Data[j].name) {
            typeNameArr.b1Data[j].value += 1;
          }
        }
        for (let k = 0; k < typeNameArr.b2Data.keys.length; k++) {
          const key = typeNameArr.b2Data.keys[k];
          const key3 = typeNameArr.b3Data.keys[k];
          if (teg.system == key) {
            typeNameArr.b2Data.datas[k] += 1;
          }
          if (teg.protocols == key3) {
            typeNameArr.b3Data.datas[k] += 1;
          }
        }
        for (let z = 0; z < typeNameArr.b6Data.keys.length; z++) {
          const key6 = typeNameArr.b6Data.keys[z];
          if (teg.addressType == key6) {
            typeNameArr.b6Data.datas[z] += 1;
          }
        }
      }
      return typeNameArr;
    }
  }
};
</script>
